<template>
	<view class="index-con">
		<block v-for="(title,index) in titles" :key="index">
			<view class="display-flex" style="flex-direction: row;align-items: flex-start;">
				<img :src="title.titleImg" class="content-icon" alt="" v-show="index==0"/>
				<view class="text">{{title.titleTxt}}</view>
			</view>

			<ul v-for="(c,index2) in active[title.type]" :key="index2" class="ul">
				<li>{{c}}</li>
			</ul>

			<view style="margin: auto;">
				<img :src="title.titleBg" class="content-bg" alt="" mode="widthFix" />
			</view>
		</block>
		<view class="index-txt">温馨提示：具体的护肤指引可以咨询你的业务伙伴</view>
	</view>
</template>

<script>
	import SkinLevel from './skin-level.vue'
	import mpHtml from '@/components/mp-html/mp-html'

	export default {
		components: {
			SkinLevel,
			mpHtml
		},
		props: {
			active: {
				type: Object,
				default: () => {
					return {}
				}
			}

		},
		data() {
			return {
				titles: [{
						titleImg: require("../../../static/hljyicon@2x.png"),
						titleTxt: '正值夏季，皮肤分泌油脂较多，紫外线强烈，容易使肤色暗沉变黑，导致肤色暗沉，护肤方面建议以美白为主。做好防晒工作是预防斑点的有效措施，软防晒和硬防晒都尽量安排起来。收缩毛孔要注意清洁控油，减少外部对肌肤的刺激，建议一周两到三次洁面仪深度清洁。关于眼部问题，选择一款保湿滋润、抗衰的眼部产品，搭配眼周按摩。少吃过油、过甜以及刺激性的食物，保持健康的生活习惯。',
						titleBg: require('../../../static/hljypt1@2x.png'),
						type: '1'
					},
					{
						titleImg: require("../../../static/hljyicon@2x.png"),
						titleTxt: '',
						titleBg: require('../../../static/hljypt2@2x.png'),
						type: '2'
					}
				]
			}
		},
		created() {
		}
	}
</script>

<style lang="scss" scoped>
	.index-con {
		min-height: 200rpx;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.index-txt {
			height: 28rpx;
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: blod;
			color: #DEA0A0;
			line-height: 28rpx;
			text-align: center;
		}

		.tag {
			width: 30rpx;
			height: 30rpx;
			margin-right: 16rpx;
			color: #333;
		}

		.text {
			font-size: 32rpx;
			word-break: normal;
			margin-left: 15rpx;
		}

		&:not(:last-child) {
			margin-bottom: 15px;
		}

		.content-info-title {
			margin-top: 30rpx;
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 17px;
			display: flex;
			flex-direction: row;
			align-items: center;

			img {
				width: 12rpx;
				height: 16rpx;
				// background: #FF6875;
				border-radius: 2px;
			}

			text {
				margin-left: 10rpx;
			}

		}

		.content-info {
			color: #333;
			text-align: justify;
			font-size: 24rpx;
			line-height: 1.5;
			font-weight: bold;

			&:not(:last-child) {
				margin-bottom: 20rpx;
			}
		}

		.content-icon {
			width: 48rpx;
			height: 48rpx;
			border-radius: 200rpx;
			margin-top: 10rpx;
		}


		.content-text {
			height: 42px;
			background: #FFF8FA;
			border-radius: 6px;
			color: #FF677D;
			font-size: 24rpx;
		}

		.content-bg {
			width: 520rpx;
			margin-top: 10rpx;
		}

		.ul {
			color: #FF677D;
			margin-left: 20rpx;
			margin-top: 20rpx;
			font-size: 28rpx;
			list-style:disc;
		}
	}
</style>
